<template>
	<view class="posiBottom">
		<uni-popup :round="15" scroll-y="true" :overlayStyle="{'touch-action':'none'}" class="popupWidth"
			ref="popup" type="center">
			<view>
				<view class="boxpopuBox">
					<view class="posiContent" v-for="item in showArr">
						<view class="priceDateBox pricMar">
							<view class="titleBox lihItem">时间：{{item.orderTime | formatTime}}</view>
							<view class="lihItem goodBoxsClss">
								<view>菜名：{{item.foodName}}</view>
								<view class="rigthGoods">
									<view>x{{item.count}}</view>
								</view>
							</view>
							<view class="money">共￥{{(item.salePrice/100).toFixed(2)}}元</view>
	
						</view>
						<view class="imgBoxs">
							<image class="imgW" :src="item.image"></image>
	
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {queryOrderDetailById} from "@/request/api.js"
	export default {
		name:"orderDetails",
		data() {
			return {
				showArr:[
					// {
					// 	orderTime:'100000',
					// 	foodName:'测试',
					// 	count:1,
					// 	salePrice:1000,
					// 	image:''
					// }
				]
			};
		},
		methods:{
			async showPop(orderId){
				this.$refs.popup.open("center");
				let res =  await queryOrderDetailById({
					method:'GET',
					data:{orderId}
				})
				if(res.code == 200){
					this.showArr = res.result.foods;
				}else{
					this.showToast({
						title:res.message,
						icon:'none'
					})
				}
				console.log(res,'res');
			}
		}
	}
</script>

<style lang="scss">
	
	.popupWidth {
		width: 70vw;
	}
	
	.boxpopuBox {
		font-size: 28rpx;
		max-height: 750rpx; // 固定高度
		overflow-y: scroll; // 超出滚动
		overscroll-behavior: none; // 禁止滚动溢出
		border-radius: 20rpx;
		background: #fff;
		.pricMar {
			// margin-bottom: 15rpx;
			&>view{
				margin-bottom:10rpx;
			}
		}
		.rigthGoods {
			// display: flex;
		}
		.lihItem {
			// line-height: 70rpx;
			// height: 70rpx;
			@include flexs(space-between, center);
			&>view:first-child{
				width:calc(100% - 50rpx);
			}
		}
		.goodBoxsClss {
			display: flex;
		}
		
		.posiContent {
			padding: 30rpx;
			width:600rpx;
			
			// width: 80vw;
			
			.popWidth {
				// width: 90vw;
				height: 20vh;
				font-weight: 800;
				font-size: 35rpx;
			}
			.money{
				color:#FD0000;
			}
		
			.imgBoxs {
				display: flex;
				justify-content: center;
		
				.imgW {
					width: 600rpx;
					height:600rpx;
				}
			}
		}
		
	}
</style>